<template>
    <div class="body shopSubmit" v-if="JSON.stringify(addresInfo) != '{}'">
        <!-- 收获地址选择与管理 -->
        <div
            class="edit_gtfix shipping_div"
            id="addressDefault"
            @click="$router.push('/address_list_check')"
        >
            <div class="namephone fl">
                <div class="top">
                    <div class="le fl" id="default_address_consignee">
                        {{ addresInfo.go ? addresInfo.consignee : '' }}
                    </div>
                    <div class="lr fl" id="default_address_mobile">
                        {{ addresInfo.go ? addresInfo.mobile : '' }}
                    </div>
                </div>
                <div class="bot">
                    <i class="dwgp"></i>
                    <span id="default_address_text"
                        >{{ addresInfo.go ? addresInfo.address_area : '' }}
                        {{ addresInfo.go ? addresInfo.address : '' }}</span
                    >
                </div>
            </div>
            <div class="fr youjter">
                <i class="Mright"></i>
            </div>
            <div class="ttrebu">
                <img src="../../assets/images/tt.png" />
            </div>
        </div>

        <!-- 获取商品信息 -->
        <div class="ord_list fill-orderlist p">
            <div class="maleri30">
                <div
                    class="shopprice"
                    v-for="(item, index) in submitInfo.cartList"
                    :key="index"
                >
                    <div class="img_or fl">
                        <img :src="item.image_link" />
                    </div>
                    <div class="fon_or fl">
                        <h2 class="similar-product-text">
                            {{ item.goods_name }}
                        </h2>

                        <div>{{ item.spec_key_name }}</div>
                    </div>
                    <div class="price_or fr">
                        <p class="red">
                            <span>￥</span
                            ><span>{{ item.member_goods_price }}</span>
                        </p>

                        <p class="ligfill">x{{ item.goods_num }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 配送方式 -->
        <div class="z-select-wrap shipping_div">
            <div class="maleri30 z-dispatching-wrap">
                <div class="p z-dispatching border-none">
                    <div class="fl">快速配送</div>
                    <div
                        class="z-dispatching-one dispatching-font1 fl"
                        style="display: block; margin-left: 0.2rem"
                    >
                        工作日、双休日与节假日均可送货
                    </div>
                    <div class="fr">
                        <label class="dispatching-checkbox">
                            <div
                                id="express_delivery"
                                class="dispatching-cont z-dispatching-cheng"
                            ></div>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <!-- 发票信息等 -->
        <div class="information_dr">
            <div class="maleri30">
                <!-- 发票 -->
                <div class="invoice list7" @click="isFapiao = !isFapiao">
                    <div class="myorder p">
                        <div class="content30">
                            <div class="order" id="invoiceDefault">
                                <div class="fl">
                                    <span>发票信息</span>
                                </div>
                                <div class="fr">
                                    <span
                                        class="invoice_title"
                                        style="margin-top: 0.6rem"
                                        >{{ InvoiceText }}</span
                                    >
                                    <i class="Mright"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--优惠券-s-->
                <div
                    class="information_dr"
                    id="coupon_div"
                    style="display: block"
                    @click="isYouhui = !isYouhui"
                >
                    <div>
                        <div class="invoice list7">
                            <div class="myorder p">
                                <div
                                    class="content30 coupon_click"
                                    style="cursor: pointer"
                                >
                                    <div class="order">
                                        <div class="fl">
                                            <span>优惠券</span>
                                            <span
                                                class="couponssl"
                                                v-if="
                                                    submitInfo.userCartCouponList
                                                "
                                                ><em id="coupon_count">{{
                                                    submitInfo
                                                        .userCartCouponList
                                                        .length
                                                }}</em
                                                >张可用</span
                                            >
                                        </div>
                                        <div class="fr">
                                            <span class="setalit counpn_name">{{
                                                isYouhuiText
                                            }}</span>
                                            <i class="Mright"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 是否使用积分 -->
                <div class="invoice list7">
                    <div class="myorder p">
                        <div class="content30">
                            <a class="remain" href="javascript:void(0);">
                                <div class="order">
                                    <div class="fl">
                                        <span>使用积分</span>

                                        <p>
                                            积分:{{
                                                submitInfo.userPayPoints
                                                    .pay_points
                                            }}<i
                                                >可抵扣:{{
                                                    submitInfo.userPayPoints
                                                        .pay_point_money
                                                        | money
                                                }}元</i
                                            >
                                        </p>
                                    </div>
                                    <div
                                        class="fr z-toggle-btn"
                                        @click="jifenCheckfn()"
                                    >
                                        <label class="z-toggle z-toggle-royal">
                                            <input
                                                type="checkbox"
                                                id="pay_points"
                                                value="0"
                                                v-model="jifenkey"
                                            />

                                            <div class="z-tarck">
                                                <div class="z-handle"></div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- 是否使余额 -->
                <div class="invoice list7">
                    <div class="myorder p">
                        <div class="content30">
                            <a class="remain" href="javascript:void(0);">
                                <div class="order">
                                    <div class="fl">
                                        <span>使用余额</span>

                                        <p>
                                            余额：￥{{
                                                submitInfo.user_money | money
                                            }}
                                        </p>
                                    </div>
                                    <div
                                        class="fr z-toggle-btn"
                                        @click="ifuserQuotas()"
                                    >
                                        <label class="z-toggle z-toggle-royal">
                                            <input
                                                type="checkbox"
                                                id="user_money"
                                                value="0.00"
                                                v-model="quotas"
                                            />

                                            <div class="z-tarck">
                                                <div class="z-handle"></div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- 卖家留言 -->
                <div class="customer-messa">
                    <div class="maleri30">
                        <p>买家留言</p>
                        <textarea
                            class="tapassa"
                            id="user_note"
                            maxlength="50"
                            v-model="liuyan"
                            placeholder="选填：对本次交易的说明.."
                        ></textarea>
                        <span class="xianzd"
                            ><em id="zero">{{ 50 - liuyan.length }}</em
                            >/50</span
                        >
                    </div>
                </div>
                <!-- 商品金额 -->
                <div class="information_dr">
                    <div class="z-monry">
                        <div class="maleri30">
                            <div class="p z-monry-cont" style="display: none">
                                <div class="fl">订单优惠</div>
                                <div class="fr">
                                    <a>
                                        ￥<span id="order_prom_amount">{{
                                            submitInfo.settlementInfo
                                                .coupon_price | money
                                        }}</span></a
                                    >
                                </div>
                            </div>
                            <div class="p z-monry-cont">
                                <div class="fl">商品金额</div>
                                <div class="fr">
                                    <a>
                                        ￥<span id="total_fee">{{
                                            submitInfo.settlementInfo
                                                .goods_price | money
                                        }}</span></a
                                    >
                                </div>
                            </div>
                            <div class="p z-monry-cont shipping_div">
                                <div class="fl">配送费用</div>
                                <div class="fr">
                                    <a>
                                        ￥<span id="postFee">{{
                                            submitInfo.settlementInfo
                                                .shipping_price | money
                                        }}</span></a
                                    >
                                </div>
                            </div>
                            <div class="p z-monry-cont">
                                <div class="fl">优惠券抵扣</div>
                                <div class="fr">
                                    <a>
                                        ￥<span id="couponFee">{{
                                            submitInfo.settlementInfo
                                                .coupon_price | money
                                        }}</span></a
                                    >
                                </div>
                            </div>
                            <div class="p z-monry-cont">
                                <div class="fl">余额抵扣</div>
                                <div class="fr">
                                    <a>
                                        ￥<span id="balance">{{
                                            submitInfo.settlementInfo.user_money
                                                | money
                                        }}</span></a
                                    >
                                </div>
                            </div>
                            <div class="p z-monry-cont">
                                <div class="fl">积分抵扣</div>
                                <div class="fr">
                                    <a>
                                        ￥<span id="balance">{{
                                            submitInfo.settlementInfo
                                                .integral_money | money
                                        }}</span></a
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 提交订单 -->
                <div class="payit fillpay ma-to-20">
                    <div class="fr submit_price">
                        <a href="javascript:void(0)" @click="submit_order()"
                            >提交订单</a
                        >
                    </div>
                    <div class="fl">
                        <p>
                            <span class="pmo">应付金额：</span>￥<span
                                id="payables"
                                >{{
                                    submitInfo.settlementInfo.order_amount
                                        | money
                                }}</span
                            ><span></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <Invoice
            v-if="isFapiao"
            @setisFapiao="isFapiaofn"
            @emitFapiaodata="bigemitFapiaodata"
        />

        <CouponsCheck
            v-if="isYouhui"
            @setisYouhui="isYouhuifn"
            @emitisYouhuidata="bigemitisYouhuidata"
            :userCartCouponList="submitInfo.userCartCouponList"
        />

        <!-- <div class="zhanwei"></div> -->
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast } from 'vant';

import Invoice from '../../components/shop/Invoice.vue';
import CouponsCheck from '../../components/shop/CouponsCheck.vue';
export default {
    name: '',
    components: {
        Invoice,
        CouponsCheck,
    },
    data() {
        return {
            submitInfo: {
                settlementInfo: {
                    user_money: 0,
                },
                userPayPoints: {
                    pay_points: 0,
                },
            }, //确认订单信息
            addresInfo: {}, // 收获地址信息

            isFapiao: false, //是否打开发票弹窗
            InvoiceInfo: {
                invoice_title: '',
                taxpayer: '',
                invoice_desc: '不开发票',
            }, //需要提交的发票信息
            InvoiceText: '不开发票', //需要显示得发票信息

            isYouhui: false, // 是否打开优惠券弹窗
            isYouhuiText: '', //需要显示的优惠券信息
            coupon_id: 0, //需要提交的优惠券信息

            liuyan: '', //买家留言

            quotas: false, //余额开关

            jifenkey: false, // 是否使用积分
        };
    },
    computed: {},
    mounted() {
        this.getAddres();
    },
    methods: {
        // 提交订单
        submit_order() {
            let goodinfo = sessionStorage.goodinfo;
            let parms = {
                action: '',
            };
            if (goodinfo) {
                parms = {
                    goods_id: JSON.parse(goodinfo).goods_id,
                    goods_num: JSON.parse(goodinfo).goods_num,
                    item_id: JSON.parse(goodinfo).item_id,
                    action: JSON.parse(goodinfo).action,
                };
            }

            parms.act = 'submit_order';

            parms.coupon_id = this.coupon_id; // 优惠券id

            parms.user_money = this.quotas ? this.submitInfo.user_money : 0; // 余额
            parms.pay_points = this.jifenkey
                ? this.submitInfo.userPayPoints.pay_points
                : 0; // 积分

            parms.address_id = this.addresInfo.go
                ? this.addresInfo.address_id
                : 0; // 收获地址id

            //需要提交的发票信息
            parms.invoice_title = this.InvoiceInfo.invoice_title;
            parms.taxpayer = this.InvoiceInfo.taxpayer;
            parms.invoice_desc = this.InvoiceInfo.invoice_desc;

            parms.user_note = this.liuyan; // 用户留言

            // console.log(parms);

            // this.$router.push('/payOrder');

            axiosPost('/api/cart/cart3', parms, (res) => {
                // console.log(res);
                if (res.status != 1) {
                    return Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                }
                sessionStorage.orderInfo = JSON.stringify({
                    order_id: this.encrypt(res.result.order_id),
                    order_sn: this.encrypt(res.result.order_sn),
                    order_amount: this.encrypt(res.result.order_amount),
                    user_money: this.encrypt(res.result.user_money),
                });
                this.$router.push('/payOrder');
            });
        },
        // 是否使用积分
        jifenCheckfn() {
            this.jifenkey = !this.jifenkey;
            this.getSubmitInfo(); // 重新计算价格
        },
        // 是否使用余额
        ifuserQuotas() {
            this.quotas = !this.quotas;
            this.getSubmitInfo(); // 重新计算价格
        },
        // 选择优惠券后的数据变化
        bigemitisYouhuidata(data) {
            // console.log(data);
            this.isYouhuiText = data.coupon.name;
            this.coupon_id = data.id;

            this.getSubmitInfo(); // 重新计算价格
        },
        // 优惠券子组件修改是否关闭优惠券弹窗
        isYouhuifn(data) {
            this.isYouhui = data;
        },
        // 选择发票后的数据变化
        bigemitFapiaodata(data) {
            this.InvoiceInfo = data;
            // console.log(data);
            // 如果选择个人：
            // invoice_title = '个人',
            // taxpayer = '',
            // invoice_desc= '商品明细 或 商品类别 或 不开发票'

            // 如果选择单位
            // invoice_title = '单位名称',
            // taxpayer = 纳税人识别号
            // invoice_desc =  '商品明细 或 商品类别 或 不开发票'

            // 如果不开发票
            // invoice_title = '',
            // taxpayer = '',
            // invoice_desc =  '不开发票'
            if (data.invoice_desc == '不开发票') {
                this.InvoiceInfo.taxpayer = '';
                this.InvoiceText = '不开发票';
                return;
            }
            if (data.invoice_title == '个人') {
                this.InvoiceInfo.taxpayer = '';
                this.InvoiceText = `纸质（个人-${data.invoice_desc}）`;
            } else {
                this.InvoiceText = `纸质（${data.invoice_title}-${data.invoice_desc}）`;
            }
        },
        // 发票子组件修改是否关闭发票弹窗
        isFapiaofn(data) {
            this.isFapiao = data;
        },
        // 获取订单信息
        getSubmitInfo() {
            let goodinfo = sessionStorage.goodinfo;
            let parms = {
                action: '',
            };
            if (goodinfo) {
                parms = {
                    action: JSON.parse(goodinfo).action,
                    goods_id: JSON.parse(goodinfo).goods_id,
                    goods_num: JSON.parse(goodinfo).goods_num,
                    item_id: JSON.parse(goodinfo).item_id,
                };
            }
            parms.coupon_id = this.coupon_id; // 优惠券id

            parms.user_money = this.quotas ? this.submitInfo.user_money : 0; // 余额
            parms.pay_points = this.jifenkey
                ? this.submitInfo.userPayPoints.pay_points
                : 0; // 积分

            parms.address_id = this.addresInfo.go
                ? this.addresInfo.address_id
                : 0; // 收获地址id
            axiosPost('/api/cart/cart2', parms, (res) => {
                // console.log(res);
                if (res.status != 1) {
                    return Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                }
                this.submitInfo = res.data;
            });
        },
        // 获取收获地址信息
        getAddres() {
            let params = {};
            let addres_url = '/api/user/getDefaultAddress';
            if (this.$route.query.address_id) {
                params = {
                    id: this.$route.query.address_id,
                };
                addres_url = '/api/user/getAddressById';
            }

            axiosPost(addres_url, params, (res) => {
                if (res.status != 1) {
                    return Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                }
                if (res.data.length == 0) {
                    this.addresInfo = {
                        go: false,
                    };
                } else {
                    res.data.go = true;
                    this.addresInfo = res.data;
                }

                this.getSubmitInfo(); // 获取订单数据

                // console.log(this.addresInfo);
            });
        },
    },
};
</script>

<style lang="less" scope>
.shopSubmit {
    .z-monry-cont {
        overflow: hidden;
    }
    .shopprice {
        overflow: hidden;
        padding: 0.2rem 0;
    }
    .edit_gtfix .namephone .top {
        font-weight: bold;
    }
    .edit_gtfix .namephone .bot span {
        font-weight: 500;
        margin-left: 0.8rem;
    }
    .fill-orderlist {
        margin-top: 0.55rem;
        padding: 0;
        background-color: #f2f2f2;
        margin-bottom: 0.427rem;
    }
    .shopprice .img_or {
        margin: 0;
        width: 3.84rem;
        height: 3.84rem;
    }
    .shopprice .img_or img {
        width: 100%;
        height: 100%;
    }
    .shopprice .fon_or {
        margin-left: 0.62rem;
        margin-top: 0;
        font-size: 0.55rem;
    }
    .shopprice .fon_or h2 {
        margin: 0;
        color: #1d1d1d;
        font-size: 0.55rem;
    }
    .shopprice .fon_or div {
        margin-top: 0.41rem;
        font-size: 0.47rem;
        color: #999999;
        line-height: 0.6rem;
    }
    .shopprice .price_or {
        margin-top: 0;
        width: 11rem;
        float: left;
        padding-left: 0.55rem;
    }
    .fill-orderlist .shopprice .price_or p.red {
        float: left;
        width: 50%;
        font-size: 0.64rem;
        font-weight: bold;
        text-align: left;
        margin-top: 0.9rem;
    }
    .fill-orderlist .shopprice .price_or p.ligfill {
        float: right;
        width: 50%;
        font-size: 0.64rem;
        margin-top: 0.9rem;
        color: #1b1b1b;
    }
    .z-select-wrap .z-select-title {
        background-color: #ffffff;
    }
    .information_dr {
        margin-top: 0.427rem;
    }
    .z-dispatching .fl {
        font-size: 0.55rem;
    }
    .invoice .myorder .order .fl span {
        font-size: 0.55rem;
    }
    .invoice .myorder .order .fl p {
        margin-bottom: 0.4rem;
    }
    .go-set-password {
        margin-left: 3.66rem;
    }
    #coupon_div {
        margin-top: 0;
    }
    .customer-messa p {
        font-size: 0.55rem;
        padding: 0;
        line-height: 1.9rem;
    }
    .customer-messa textarea {
        outline: none;
        margin-top: 0;
        height: 2.99rem;
        background-color: #f2f2f2;
        padding: 0.47rem 0.62rem;
    }
    .z-monry .z-monry-cont .fl {
        margin: 0;
        line-height: 1.26rem;
    }
    .z-monry .z-monry-cont .fr a {
        margin: 0;
        line-height: 1.26rem;
        font-weight: bold;
    }
    .dizhi-pop {
        background-color: #fafafa;
    }
    .z-Package-hrader {
        background-color: #eee;
    }
    .jd_listaddless {
        padding: 0.661rem 0;
        border-bottom: 0.021rem solid #e6e6e6;
    }
    .list7 .myorder .fr i {
        margin-top: 0.58rem;
    }
    .detailsfloo .myorder .order .fl span {
        float: left;
        font-size: 0.55rem;
        max-width: auto;
        white-space: inherit;
        overflow: auto;
        text-overflow: inherit;
        color: #1f1f1f;
        margin-left: 1em;
    }
}
</style>
